<template>
  <div id="progress" v-loading.fullscreen.lock="fullscreenLoading"
              element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)">
    <el-row type="flex" class="" justify="center">
      <el-col :span="23" class="line">
        <i class="el-icon-menu"></i>学生信息
         <i class="el-icon-arrow-right"></i>详情
      </el-col>
    </el-row>
    <div class="content" >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-card class="box-card" style="text-align:center;">
            <table class="layui-table">
              <tbody>
                <th colspan="12" style="text-align: center">浙江工商大学“三位一体”综合评价招生报名表</th>
                <tr>
                  <td colspan="2">姓名</td>
                  <td>
                    {{userbase.name}}
                  </td>
                  <td colspan="2">性别</td>
                  <td colspan="2">
                    {{userbase.sex}}
                  </td>
                  <td colspan="2">出生年月</td>
                  <td colspan="2">
                    {{userbase.birth}}
                  </td>
                  <td rowspan="4">
                    <img :src="userbase.img" height="150px" width="100px">
                  </td>
                </tr>
                <tr>
                  <td colspan="2">政治面貌</td>
                  <td>
                    {{userbase.politics}}
                  </td>
                  <td colspan="2">民族</td>
                  <td colspan="2">
                    {{userbase.nation}}
                  </td>
                  <td colspan="2">考生类别</td>
                  <td colspan="2">
                    {{userbase.utype}}
                  </td>
                </tr>
                <tr>
                  <td colspan="2">身份证号</td>
                  <td colspan="4">
                    {{userbase.idnum}}
                  </td>
                  <td colspan="2">生源地</td>
                  <td colspan="3">
                    {{userbase.bp}}
                  </td>
                </tr>
                <tr>
                  <td colspan="2">联系手机</td>
                  <td colspan="4">
                    {{userbase.mobile1}}
                  </td>
                  <td colspan="2">联系手机</td>
                  <td colspan="3">
                    {{userbase.mobile2}}
                  </td>
                </tr>
                <tr>
                  <td colspan="2">高中地址</td>
                  <td colspan="10">
                    {{userbase.high}}
                  </td>
                </tr>
                <tr>
                  <td colspan="2">家庭地址</td>
                  <td colspan="10">
                    {{userbase.home}}
                  </td>

                </tr>


                <tr>
                  <td class="members" :rowspan="rowspan" colspan="2">家庭成员及社会关系</td>
                  <td colspan="2">称谓</td>
                  <td colspan="2">姓名</td>
                  <td colspan="3">联系电话</td>
                  <td colspan="3">工作单位</td>
                </tr>
                <template v-for="item in families">
                  <tr class="member" id="test">
                    <td colspan="2">
                      {{item.cname}}
                    </td>
                    <td colspan="2">
                      {{item.name}}
                    </td>
                    <td colspan="3">
                      {{item.mobile}}
                    </td>
                    <td colspan="3">
                      {{item.work}}
                    </td>
                  </tr>
                </template>
                <tr>
                  <td class="members" colspan="2">选考科目</td>
                  <td colspan="5">
                    {{swyt.subject}}
                  </td>
                  <td colspan="2">测试类别</td>
                  <td colspan="3">
                     {{swyt.ctype}}
                  </td>
                </tr>
                <tr>
                  <td class="members" colspan="2" rowspan="4">会考成绩</td>
                  <td width="70px">语文</td>
                  <td width="70px">
                    {{hkinfo.yw}}
                  </td>
                  <td colspan="2" width="80px">历史</td>
                  <td colspan="2">
                    {{hkinfo.ls}}
                  </td>
                  <td colspan="2" width="40px">化学</td>
                  <td colspan="2">
                    {{hkinfo.hx}}
                  </td>
                </tr>
                <tr>
                  <td>数学</td>
                  <td>
                   {{hkinfo.sx}}
                  </td>
                  <td colspan="2">物理</td>
                  <td colspan="2">
                    {{hkinfo.wl}}
                  </td>
                  <td colspan="2">技术</td>
                  <td colspan="2">
                    {{hkinfo.js}}
                  </td>
                </tr>
                <tr>
                  <td>英语</td>
                  <td>
                    {{hkinfo.yy}}
                  </td>
                  <td colspan="2">地理</td>
                  <td colspan="2">
                    {{hkinfo.dl}}
                  </td>
                  <td colspan="2">政治</td>
                  <td colspan="2">
                   {{hkinfo.zz}}
                  </td>
                </tr>
                <tr>
                  <td>生物</td>
                  <td>
                    {{hkinfo.sw}}
                  </td>
                  <td colspan="8"></td>
                </tr>
                <tr>
                  <td class="awards" colspan="2" :rowspan="Srowspan">是否专项生</td>
                  <td :colspan="Scolspan" :rowspan="Srowspan">
                    {{swyt.special}}
                  </td>
                  <td colspan="5" v-show="specialShow">
                    专项名称
                  </td>
                  <td colspan="4" v-show="specialShow">
                    证明
                  </td>
                </tr>
                <tr v-show="specialShow">
                  <td colspan="5">
                   {{special_con.name}}
                  </td>
                  <td colspan="4">
                    见证明清单
                  </td>
                </tr>
                <tr>
                  <td class="study_experience" :rowspan="Erowspan" colspan="2">学习经历</td>
                  <td colspan="2">何年何月至何年何月</td>
                  <td colspan="2">何学校或单位</td>
                  <td colspan="3">任何职</td>
                  <td colspan="3">证明人</td>
                </tr>
                <template v-for="item in experience">
                  <tr class="experience">
                    <td colspan="2">
                      {{item.time}}
                    </td>
                    <td colspan="2">
                      {{item.place}}
                    </td>
                    <td colspan="3">
                      {{item.work}}
                    </td>
                    <td colspan="3">
                     {{item.witness}}
                    </td>
                  </tr>
                </template>
                <tr>
                  <td class="awards" colspan="2" :rowspan="Arowspan">奖惩情况</td>
                  <td colspan="3">
                    获奖时间
                  </td>
                  <td colspan="4">
                    奖项名称
                  </td>
                  <td colspan="3">
                    证明
                  </td>
                </tr>
                <template v-for="item in reward">
                  <tr class="award">
                    <td colspan="3">
                      {{item.time}}
                    </td>
                    <td colspan="4">
                      {{item.name}}
                    </td>
                    <td colspan="3">
                      见证明清单
                    </td>
                  </tr>
                </template>
              </tbody>
            </table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="综合素质评价" name="second">
          <el-card class="box-card" style="text-align:center;">
            <iframe src="" frameborder="0" id="pdfContainer" name="pdfContainer"></iframe>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="证明清单" name="third">
          <el-card class="box-card" style="text-align:center;margin-bottom:10px;">
            <el-table
              :data="witness"
              stripe
              style="width: 100%">
              <el-table-column
                prop="name"
                label="奖项名称"
                align="center"
                width="200px">
              </el-table-column>
              <el-table-column
                label="证明"
                align="center">
                <template slot-scope="scope">
                   <img :src="scope.row.imageUrl" height="50" width="100" @click="BigImg(scope.row)"/>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <!-- 查看图片 -->
          <el-dialog
            title=""
            :visible.sync="dialogVisible">
            <img :src="BigImgUrl" height="35%" width="35%">
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="评分内容" name="forth">
         
          <el-alert
                title="该考生会考成绩已被管理员修正"
                type="error"
                v-show="tipshow"
                left
                show-icon
                class="tip">
          </el-alert>
          <el-card class="box-card" style="text-align:center;margin-bottom:10px;">
            <div v-show="reviewShow1">
              <table class="layui-table">
                <tbody>
                  <tr>
                    <td colspan="2">综合素质评价</td>
                  </tr>
                  <tr>
                    <td>综合素质评价1</td>
                    <td>
                      <el-select v-model="quality.report1" placeholder="请选择">
                        <el-option label="A" value="A"></el-option>
                        <el-option label="B" value="B"></el-option>
                        <el-option label="C" value="C"></el-option>
                        <el-option label="D" value="D"></el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td>综合素质评价2</td>
                    <td>
                      <el-select v-model="quality.report2" placeholder="请选择">
                        <el-option label="A" value="A"></el-option>
                        <el-option label="B" value="B"></el-option>
                        <el-option label="C" value="C"></el-option>
                        <el-option label="D" value="D"></el-option>
                      </el-select>
                    </td>
                  </tr><tr>
                    <td>综合素质评价3</td>
                    <td>
                      <el-select v-model="quality.report3" placeholder="请选择">
                        <el-option label="A" value="A"></el-option>
                        <el-option label="B" value="B"></el-option>
                        <el-option label="C" value="C"></el-option>
                        <el-option label="D" value="D"></el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td>综合素质评价4</td>
                    <td>
                      <el-select v-model="quality.report4" placeholder="请选择">
                        <el-option label="A" value="A"></el-option>
                        <el-option label="B" value="B"></el-option>
                        <el-option label="C" value="C"></el-option>
                        <el-option label="D" value="D"></el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2">加分项</td>
                  </tr>
                  <tr>
                    <td>国家级</td>
                    <td>
                      <el-input style="width:100px" v-model="plus.national"></el-input> 项
                    </td>
                  </tr>
                  <tr>
                    <td>省级</td>
                    <td>
                      <el-input style="width:100px" v-model="plus.province"></el-input> 项
                    </td>
                  </tr>
                  <tr>
                    <td>市级</td>
                    <td>
                      <el-input style="width:100px" v-model="plus.city"></el-input> 项
                    </td>
                  </tr>
                  <tr>
                    <td>县区级</td>
                    <td>
                      <el-input style="width:100px" v-model="plus.area"></el-input> 项
                    </td>
                  </tr>
                  <tr>
                    <td>校级</td>
                    <td>
                      <el-input style="width:100px" v-model="plus.school"></el-input> 项
                    </td>
                  </tr>
                </tbody>
              </table>
              <el-button type="primary" style="width:100px;margin-top:10px;" @click="saveBase('base')">保存</el-button> 
            </div>
            <div v-show="reviewShow2">
              <div class="reportCon">
                <h3>自述报告</h3>
                <div style="height:250px;overflow:auto;">
                  <img :src="reportCon" width="100%;">
                </div>
              </div>
              <el-input v-model="reportScore" placeholder="得分" style="width:100px;margin:0 20px;"></el-input>
              <el-button type="primary" style="width:100px;margin-top:10px;" @click="saveReport('report')">保存</el-button> 
            </div>
          </el-card>  
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import '../../../static/pdf.js'
import '../../../static/pdf.worker.js'
  export default {
    data() {
      return {
        //查看图片
        dialogVisible:false,
        BigImgUrl:'',
        fullscreenLoading:false,
        userId:'',
        rowspan: 1,
        Erowspan: 1,
        Arowspan: 1,
        Scolspan:10,
        Srowspan:1,
        imageUrl: '',
        checked: true,
        specialShow:false,
        special_con:'',
        activeName: 'first',
        imgUrl: '',
        reviewShow1:false,
        reviewShow2:false,
        reportCon:"",
        reportScore:'',
        userbase:{},
        swyt:{},
        hkinfo:{},
        hkscore:'',
        reward:{},
        experience:{},
        families:{},
        witness:[],
      
        quality:{
          report1:'',
          report2:'',
          report3:'',
          report4:'',
        },
        plus:{
          national:'',
          province:'',
          city:'',
          area:'',
          school:''
        },
        tipshow:false
      }
    },
    mounted(){
      //document.getElementById("pdfContainer").src="../../../static/8.pdf"
      this.fullscreenLoading=true;
      this.getInfo();
    },
    methods: {
      getInfo(){
        var that=this;
        var user=location.href.split('?')[1];
        var userId=user.split("=")[1];
        this.userId=userId;
        this.axios({
          url:this.host+'/3v1t.smserver.cn/index.php/audit/index/get_userinfo',
          method:'post',
          data:JSON.stringify({id:userId}),
          headers:{
                "Content-type":"application/json"
          }
        }).then((res)=>{
          console.log(res);
          var data=res.data.data;
          that.fullscreenLoading=false;
          document.getElementById("pdfContainer").src=res.data.zhsm;
          if(res.data.code==1){
            data.userbase.bp=data.userbase.bp_province+data.userbase.bp_city+data.userbase.bp_area
            data.userbase.high=data.userbase.high.province+data.userbase.high.city+data.userbase.high.area;
            data.userbase.home=data.userbase.home.province+data.userbase.home.city+data.userbase.home.area;
            that.userbase=data.userbase;
            data.swyt.subject=data.swyt.subject1+data.swyt.subject2+data.swyt.subject3
            if(data.swyt.special=="1"){
              data.swyt.special="是"
              that.Scolspan=1;
              that.Srowspan=2;
              that.specialShow=true;
              that.special_con=data.swyt.special_con;
            }
            that.swyt=data.swyt;
            that.hkinfo=data.swyt.hkinfo;
            that.families=[];
            data.userbase.families.forEach((item)=>{
              if(item.cname!=""){
                that.rowspan+=1;
                that.families.push(item)
              }
            })
            that.experience=[];
            data.swyt.experience.forEach((item)=>{
              if(item.time!=""){
                that.Erowspan+=1;
                that.experience.push(item)
              }
            })
            that.reward=[];
            data.swyt.reward.forEach((item)=>{
              if(item.time!=""){
                that.Arowspan+=1;
                that.reward.push(item)
              }
            })
            that.witness=that.witness.concat(that.reward)
            if(data.swyt.special=="是"){
              that.witness.push(data.swyt.special_con)
            }
            if(data.type=="base"){
              that.reviewShow1=true
            }else{
              that.reviewShow2=true;
            }

            if(data.swyt.report){
              that.reportCon=data.swyt.report;
            }

            //证明内容
            if(data.plus){
              that.plus=JSON.parse(data.plus);
            }
            if(data.report_val){
              that.reportScore=data.report_val;
            }
            if(data.quality){
              that.quality=JSON.parse(data.quality);
            }
            //显示提示信息
            if(data.entry.modify==1){
              that.tipshow=true;
            }
          } 
        })
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      BigImg(mess){
        this.BigImgUrl=mess.imageUrl
        this.dialogVisible=true;
      },
    
      saveReport(tag){
        var that=this;
        var content={
          quality:this.quality,
          plus:this.plus,
          report:this.reportScore
        }
        var message={
          content:content,
          tag:tag,
          id:this.userId
        }
        this.axios({
          url:this.host+'/3v1t.smserver.cn/index.php/index/audit.index/info_post',
          method:'post',
          data:JSON.stringify(message),
          headers:{
                "Content-type":"application/json"
          }
        }).then((res)=>{
          if(res.data.code==1){
                   that.fullscreenLoading=false;
                  that.$message({
                    type:'success',
                    message:''+res.data.msg
                  })
                }else if(res.data.code==2){
                   that.fullscreenLoading=false;
                  that.$message({
                    type:'warning',
                    message:''+res.data.msg
                  })
                }   
        })
      },
      saveBase(tag){
        var that=this;
        var content={
          quality:this.quality,
          plus:this.plus,
          report:this.reportScore
        }
        var message={
          content:content,
          tag:tag,
          id:this.userId
        }
        console.log(message);
        this.axios({
          url:this.host+'/3v1t.smserver.cn/index.php/index/audit.index/info_post',
          method:'post',
          data:JSON.stringify(message),
          headers:{
                "Content-type":"application/json"
          }
        }).then((res)=>{
         if(res.data.code==1){
                   that.fullscreenLoading=false;
                  that.$message({
                    type:'success',
                    message:''+res.data.msg
                  })
                }else if(res.data.code==2){
                   that.fullscreenLoading=false;
                  that.$message({
                    type:'warning',
                    message:''+res.data.msg
                  })
                }   
        })
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  #progress {
    //width:100%;
    //line-height:100%;
    padding: 10px;
    .line {
      border-bottom: 1px solid #ccc;
      text-align: left;
      height: 50px;
      line-height: 50px;
      padding-left: 10px;
    }
    .content {
      padding: 20px 30px;
      text-align: center;
      position:relative;
    }
    .el-tabs__nav{
      margin-left:20px;
    }
    .reportCon{
      border:1px solid #ddd;
      border-radius:6px;
      margin-bottom:20px;
      margin-top:5px;
      h3{
        border-bottom:1px solid #ddd;
        width:70%;
        height:50px;
        line-height:50px;
        margin:0 auto;
      }
      div{
        padding:20px;
      }
    }
    .el-dialog{
      width: 100%;
      height: 100%;
      background: transparent;
    }
    .tip{
      position:absolute;
      left:20px;
      top:13px;
      width:81%;
    }
    .el-card__body{
      padding:40px 20px 20px 20px;
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: #e4e7ed;
        font-size:22px;
    }
    iframe{
        width: 100%;
        height: 700px;
    }
  }

</style>
